<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AMIS - 百度开源低代码前端框架</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%);
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .feature-icon {
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 16px;
            margin-bottom: 1.5rem;
        }
        .mermaid-chart {
            background: white;
            border-radius: 12px;
            padding: 2rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
        .drop-cap::first-letter {
            font-size: 3.5rem;
            font-weight: bold;
            float: left;
            line-height: 0.8;
            margin-right: 0.5rem;
            color: #2563eb;
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-4 md:py-32">
        <div class="container mx-auto max-w-6xl">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl font-bold mb-4 leading-tight">AMIS低代码前端框架</h1>
                    <p class="text-xl md:text-2xl mb-8 font-light opacity-90">通过JSON配置快速构建复杂页面，大幅提升开发效率</p>
                    <div class="flex flex-col sm:flex-row gap-4">
                        <a href="https://github.com/baidu/amis" class="bg-white text-blue-900 hover:bg-blue-50 px-6 py-3 rounded-lg font-semibold text-center transition duration-300 transform hover:scale-105">
                            <i class="fab fa-github mr-2"></i> GitHub 仓库
                        </a>
                        <a href="#features" class="bg-transparent hover:bg-white hover:bg-opacity-10 border border-white px-6 py-3 rounded-lg font-semibold text-center transition duration-300">
                            探索功能 <i class="fas fa-arrow-down ml-2"></i>
                        </a>
                    </div>
                </div>
                <div class="md:w-1/2 flex justify-center">
                    <div class="bg-white bg-opacity-20 p-6 rounded-xl backdrop-blur-sm border border-white border-opacity-20 max-w-md">
                        <pre class="text-sm text-blue-100 overflow-x-auto"><code class="language-json">{
  "type": "page",
  "title": "欢迎页面",
  "body": [
    {
      "type": "form",
      "controls": [
        {
          "type": "text",
          "label": "用户名",
          "name": "username"
        },
        {
          "type": "password",
          "label": "密码",
          "name": "password"
        }
      ]
    }
  ]
}</code></pre>
                        <p class="text-white text-sm mt-4 text-center opacity-80">简单的JSON配置即可生成完整的表单页面</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Introduction Section -->
    <section class="py-16 px-4 bg-white">
        <div class="container mx-auto max-w-4xl">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold text-gray-800 mb-4">什么是AMIS?</h2>
                <div class="w-20 h-1 bg-blue-500 mx-auto"></div>
            </div>
            <div class="drop-cap text-lg text-gray-700 leading-relaxed">
                AMIS是百度开源的低代码前端框架，通过JSON配置即可快速构建复杂页面，特别适合中后台系统开发。它显著降低了前端开发门槛，使开发者无需编写大量重复代码即可创建功能完备的用户界面。内置丰富的组件库和可视化编辑工具，让开发效率提升数倍。
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section id="features" class="py-20 px-4 bg-gray-50">
        <div class="container mx-auto max-w-6xl">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold text-gray-800 mb-4">核心功能</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">AMIS提供了一系列强大功能，满足各种业务场景需求</p>
                <div class="w-20 h-1 bg-blue-500 mx-auto mt-4"></div>
            </div>
            
            <div class="grid md:grid-cols-3 gap-8">
                <!-- Feature 1 -->
                <div class="bg-white p-8 rounded-xl shadow-md card-hover transition duration-300">
                    <div class="feature-icon bg-blue-100 text-blue-600">
                        <i class="fas fa-code text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">JSON配置驱动</h3>
                    <p class="text-gray-600">通过声明式JSON配置生成页面，无需编写大量重复代码，大大提高开发效率。</p>
                </div>
                
                <!-- Feature 2 -->
                <div class="bg-white p-8 rounded-xl shadow-md card-hover transition duration-300">
                    <div class="feature-icon bg-purple-100 text-purple-600">
                        <i class="fas fa-cubes text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">丰富组件库</h3>
                    <p class="text-gray-600">内置100+组件，覆盖表单、表格、图表等常见业务场景，开箱即用。</p>
                </div>
                
                <!-- Feature 3 -->
                <div class="bg-white p-8 rounded-xl shadow-md card-hover transition duration-300">
                    <div class="feature-icon bg-green-100 text-green-600">
                        <i class="fas fa-edit text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">可视化编辑器</h3>
                    <p class="text-gray-600">提供所见即所得的页面设计工具，非技术人员也能快速搭建页面。</p>
                </div>
                
                <!-- Feature 4 -->
                <div class="bg-white p-8 rounded-xl shadow-md card-hover transition duration-300">
                    <div class="feature-icon bg-yellow-100 text-yellow-600">
                        <i class="fas fa-palette text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">主题定制</h3>
                    <p class="text-gray-600">支持自定义主题，轻松适配不同品牌风格，保持UI一致性。</p>
                </div>
                
                <!-- Feature 5 -->
                <div class="bg-white p-8 rounded-xl shadow-md card-hover transition duration-300">
                    <div class="feature-icon bg-red-100 text-red-600">
                        <i class="fas fa-project-diagram text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">数据联动</h3>
                    <p class="text-gray-600">强大的数据绑定和联动能力，组件间可自动响应数据变化。</p>
                </div>
                
                <!-- Feature 6 -->
                <div class="bg-white p-8 rounded-xl shadow-md card-hover transition duration-300">
                    <div class="feature-icon bg-indigo-100 text-indigo-600">
                        <i class="fas fa-users text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">社区支持</h3>
                    <p class="text-gray-600">活跃的开源社区，完善的文档和示例，快速解决开发问题。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Use Cases Section -->
    <section class="py-20 px-4 bg-white">
        <div class="container mx-auto max-w-6xl">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold text-gray-800 mb-4">使用场景</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">AMIS适用于多种业务场景，特别适合快速开发需求</p>
                <div class="w-20 h-1 bg-blue-500 mx-auto mt-4"></div>
            </div>
            
            <div class="grid md:grid-cols-3 gap-8">
                <div class="bg-gray-50 p-6 rounded-lg border border-gray-200 flex items-start">
                    <div class="bg-blue-100 text-blue-600 rounded-full p-3 mr-4">
                        <i class="fas fa-building text-lg"></i>
                    </div>
                    <div>
                        <h3 class="font-bold text-lg mb-2 text-gray-800">企业级中后台</h3>
                        <p class="text-gray-600">快速构建管理系统、CRM、ERP等复杂后台应用</p>
                    </div>
                </div>
                
                <div class="bg-gray-50 p-6 rounded-lg border border-gray-200 flex items-start">
                    <div class="bg-purple-100 text-purple-600 rounded-full p-3 mr-4">
                        <i class="fas fa-chart-bar text-lg"></i>
                    </div>
                    <div>
                        <h3 class="font-bold text-lg mb-2 text-gray-800">数据可视化</h3>
                        <p class="text-gray-600">构建仪表盘、数据分析平台等数据展示应用</p>
                    </div>
                </div>
                
                <div class="bg-gray-50 p-6 rounded-lg border border-gray-200 flex items-start">
                    <div class="bg-green-100 text-green-600 rounded-full p-3 mr-4">
                        <i class="fas fa-file-alt text-lg"></i>
                    </div>
                    <div>
                        <h3 class="font-bold text-lg mb-2 text-gray-800">表单类应用</h3>
                        <p class="text-gray-600">快速开发问卷调查、信息收集等表单密集型应用</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Architecture Diagram -->
    <section class="py-20 px-4 bg-gray-50">
        <div class="container mx-auto max-w-6xl">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold text-gray-800 mb-4">AMIS架构概览</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">了解AMIS如何将JSON配置转化为精美页面</p>
                <div class="w-20 h-1 bg-blue-500 mx-auto mt-4"></div>
            </div>
            
            <div class="mermaid-chart">
                <div class="mermaid">
                    graph TD
                        A[JSON配置] --> B[AMIS渲染引擎]
                        B --> C[React组件树]
                        C --> D[最终UI界面]
                        A --> E[可视化编辑器]
                        E --> A
                        B --> F[数据绑定]
                        F --> G[API接口]
                </div>
            </div>
        </div>
    </section>

    <!-- Advantages Section -->
    <section class="py-20 px-4 bg-white">
        <div class="container mx-auto max-w-4xl">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold text-gray-800 mb-4">优势与特色</h2>
                <div class="w-20 h-1 bg-blue-500 mx-auto"></div>
            </div>
            
            <div class="grid gap-8">
                <div class="flex items-start">
                    <div class="bg-blue-500 text-white rounded-full p-2 mr-4 flex-shrink-0">
                        <i class="fas fa-bolt text-sm"></i>
                    </div>
                    <div>
                        <h3 class="font-bold text-lg mb-2 text-gray-800">开发效率飞跃</h3>
                        <p class="text-gray-600">相比传统开发方式，使用AMIS可以将开发效率提升3-5倍，特别适合快速迭代的项目。</p>
                    </div>
                </div>
                
                <div class="flex items-start">
                    <div class="bg-green-500 text-white rounded-full p-2 mr-4 flex-shrink-0">
                        <i class="fas fa-box-open text-sm"></i>
                    </div>
                    <div>
                        <h3 class="font-bold text-lg mb-2 text-gray-800">开箱即用</h3>
                        <p class="text-gray-600">内置丰富组件覆盖大多数业务场景，无需从零开发，专注于业务逻辑实现。</p>
                    </div>
                </div>
                
                <div class="flex items-start">
                    <div class="bg-purple-500 text-white rounded-full p-2 mr-4 flex-shrink-0">
                        <i class="fas fa-expand text-sm"></i>
                    </div>
                    <div>
                        <h3 class="font-bold text-lg mb-2 text-gray-800">扩展性强</h3>
                        <p class="text-gray-600">支持自定义组件开发，可以轻松扩展框架功能，满足特殊业务需求。</p>
                    </div>
                </div>
                
                <div class="flex items-start">
                    <div class="bg-yellow-500 text-white rounded-full p-2 mr-4 flex-shrink-0">
                        <i class="fas fa-book text-sm"></i>
                    </div>
                    <div>
                        <h3 class="font-bold text-lg mb-2 text-gray-800">文档完善</h3>
                        <p class="text-gray-600">提供详细的开发文档、示例代码和最佳实践，降低学习曲线。</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-20 px-4 bg-blue-50">
        <div class="container mx-auto max-w-4xl text-center">
            <h2 class="text-3xl font-bold text-gray-800 mb-6">开始使用AMIS</h2>
            <p class="text-xl text-gray-600 mb-8">完全开源免费，基于MIT协议。立即体验低代码开发的魅力！</p>
            <div class="flex flex-col sm:flex-row justify-center gap-4">
                <a href="https://github.com/baidu/amis" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg font-semibold transition duration-300 transform hover:scale-105">
                    <i class="fab fa-github mr-2"></i> GitHub仓库
                </a>
                <a href="https://baidu.github.io/amis/zh-CN/docs/index" class="bg-white hover:bg-gray-100 text-blue-600 border border-blue-200 px-8 py-3 rounded-lg font-semibold transition duration-300">
                    <i class="fas fa-book-open mr-2"></i> 查看文档
                </a>
            </div>
            <p class="text-gray-500 mt-6 text-sm">需要基本的JavaScript和React知识，适合有一定前端基础的开发者</p>
        </div>
    </section>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
    </script>
</body>
</html>